<template>
  <div class="box">
    <div class="box-header">
      <span class="title">余震列表</span>
      <span class="num">数量:{{ shockList.length || 0 }}</span>
    </div>
    <div class="content">
      <div
        :class="['item', activeIndex === index ? 'active' : '']"
        v-for="(item, index) in shockList"
        :key="item"
        @click="handleClick(index, item)"
      >
        <div class="item-left">{{ item.earthquakeMagnitude }}</div>
        <div class="item-right">
          <div class="big-text">{{ item.title }}</div>
          <div>{{ item.earthquakeTime }}</div>
          <div>
            <span>经度:&nbsp;{{ item.longitude }}&nbsp;</span>
            <span>纬度:&nbsp;{{ item.latitude }}&nbsp;</span>
            <span>深度:&nbsp;{{ item.depth }}km&nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <teleport to="body">
    <div class="audio-play" v-if="audioFlag">
      <div class="clear" @click="init"></div>
      <div :class="['playe', play ? 'stop' : '']" @click="playEarthQuke"></div>
      <div class="pross">
        <!-- <div style="color: #fff" v-show="newInfo.title"> -->
        <div
          v-show="newInfo.title"
          style="
            color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
          "
        >
          {{  newInfo.title }}
          &nbsp; &nbsp; &nbsp; &nbsp;
          {{  newInfo.earthquakeTime }}
        </div>
        <el-progress :percentage="percentage" :max="5" style="color: #fff" />
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref, onUnmounted, defineProps } from 'vue'
import { getShockEarthQuake } from '../../../../api/earthquake'
import { useMapStoreStore } from '../../../../stores/index'
import { createPoint } from '../../../../api/gis3d/maputils'
const store = useMapStoreStore()
const activeIndex = ref(-1)
const props = defineProps(['toolIndex'])
watch(
  () => props.toolIndex,
  (newval) => {
    if (newval == 1 && audioFlag.value === false && shockList.value.length > 0) {
      loadStockList()
    }
  }
)

const handleClick = (i, item) => {
  if (activeIndex.value === i) {
    return
  }
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 20000),
    duration: 1 // 飞行时间（s）
  })
}

const shockList = ref([
  // {
  //   title: '123',
  //   longitude: '102',
  //   latitude: '36',
  //   depth: '13',
  //   referenceLocation: '1',
  //   earthquakeType: '5.0',
  //   earthquakeMagnitude: '11',
  //   earthquakeTime: '2023-0101 12:10:10'
  // },
  // {
  //   title: '324234',
  //   longitude: '103',
  //   latitude: '36',
  //   depth: '13',
  //   referenceLocation: '1',
  //   earthquakeType: '5.0',
  //   earthquakeMagnitude: '11',
  //   earthquakeTime: '2023-0101 12:10:10'
  // }
])

const play = ref(false)
const audioFlag = ref(false)
const percentage = ref(0)
let interval = null
let entityArr = []
var index = 0
const newInfo = ref({})
const playEarthQuke = () => {
  play.value = !play.value

  if (!play.value) {
    stopEarthQuake()
    return
  }
  initEntityColor()
  var len = shockList.value.length

  var data = entityArr[0]
  newInfo.value = shockList.value[0]

  data.point.color._value.alpha = 1
  percentage.value += 100 / len

  interval = setInterval(() => {
    if (percentage.value >= 100) {
      play.value = false
      clearInterval(interval)
      index = 0
      percentage.value = 0
      newInfo.value = {};
    //  initEntityColor()
      return
    }
    index++
    var data = entityArr[index]
    newInfo.value = shockList.value[index]

    data.point.color._value.alpha = 1
    percentage.value += 100 / len
  }, 2000)
}
const stopEarthQuake = () => {
  clearInterval(interval)
}



function init() {
  audioFlag.value = false
  interval && clearInterval(interval)
  index = 0
  play.value = false
  percentage.value = 0
  interval = null
  newInfo.value = {}
  removeEnriry()
}

function loadStockList() {
  for (const item of shockList.value) {
    var entity = createPoint({
      position: [item.longitude, item.latitude],
      color: '#fd201c',
      data: item,
      type: 'shock-poi',
      size: 20,
      label: { text: item.earthquakeMagnitude + '级', color: '#fff' }
    })
    entityArr.push(entity)
  }
  audioFlag.value = true
}

function initEntityColor() {
  for (const item of entityArr) {
    item.point.color._value.alpha = 0.45
  }
}

function removeEnriry() {
  for (const element of entityArr) {
    viewer.entities.remove(element)
  }
  entityArr = []
}

onMounted(() => {
  getShockEarthQuake({ earthquakeid: store.eqid }).then((e) => {
    shockList.value = e
  })
})
onUnmounted(() => {
  interval && clearInterval(interval)
})
</script>

<style lang="scss" scoped>
.clear {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(/static/icon/删除@1x.png);
  background-size: contain;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.clear-icon:hover {
  transform: rotate(360deg);
  transition: all 1s ease;
}
:deep(.el-progress__text) {
  color: #fff;
}
:deep(.el-progress__text) {
  display: none;
}
.audio-play {
  width: 800px;
  height: 74px;
  background-image: url(/static/assets/3d/audiobox.png);
  background-size: 100% 100%;
  position: fixed;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-400px);
  display: flex;
  align-items: center;
  padding: 0 20px;
  .pross {
    flex: 1;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .playe {
    width: 54px;
    height: 54px;
    background-image: url(/static/assets/3d/play.png);
    background-size: 100% 100%;
  }
  .stop {
    background-image: url(/static/assets/3d/stop.png);
  }
}
.box {
  height: 100%;
  .box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #c9f3ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    .title {
      font-style: italic;
      font-weight: bold;
    }

    .num {
      font-size: 18px;

      background: linear-gradient(180deg, #00e0db 0%, #c9f3ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }
  .content {
    height: calc(100% - 45px);
    box-sizing: border-box;
    overflow: auto;
    // 滚动条整体部分
    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }
    &::-webkit-scrollbar-button {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background: #01c2ff;
      cursor: pointer;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-corner {
      display: none;
    }
    &::-webkit-resizer {
      display: none;
    }
    .item {
      display: flex;
      background: linear-gradient(91deg, #0d3347 0%, rgba(14, 51, 71, 0.2) 99%);
      margin-bottom: 15px;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      cursor: pointer;
      .item-left {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        border-radius: 10px;
        background: #1c5872;

        box-sizing: border-box;
        border: 1px solid rgba(137, 206, 255, 0.5);
      }
      .item-right {
        padding: 10px;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #b9eeff;
        line-height: 25px;
        .big-text {
          font-size: 18px;
          color: #ffffff;
          font-weight: 550;
        }
      }
    }
    .item:hover,
    .active {
      background-color: rgb(19, 116, 219);
      box-shadow: 0 0 10px #1678e1;
    }
  }
}
</style>